import React, { Component } from 'react';
class Demo extends Component{
// 5 Demo组件传给Test组件 执行父组件 执行父组件传来的方法
  handleClick = (params) => {
    this.props.handlePClick("(^@@^)");  
  };
  render(){
    return <div>
      <h1>Demo组件</h1>
      <h1>{this.props.children}</h1>
      {/* 5.1 定义Demo组件触发事件的方法*/}
      <button onClick={this.handleClick}>传值给兄弟Test</button>
    </div>
  };
};
class DemoChild extends Component{
  render(){
    return <h1>DemoChild组件</h1>
  }
}
class Test extends Component{
  render(){
    return <div>
      <h1>Test 组件</h1>
      {/* 6 Test组件中.通过props.title访问到Demo组件传来的值 */}
      <h1>接收到兄弟Demo传来的值{this.props.title}</h1>
    </div>
  };
};
class App extends Component {
  // 1 定义title 用来实现兄弟传值
  state={
    title:""
  };
  // 2 定义一个父组件的方法 传给demo组件去调用
  handlePClick=(params) => {
    this.setState({
      title:params
    });
  };
  render() {
    return (
      <div> 
        {/* 3 将父组件方法传给demo组件 */}
        <Demo handlePClick={this.handlePClick}>
          <DemoChild ></DemoChild>
        </Demo>
        {/* 4 将父组件中的title传值给Teat组件 */}
        <Test title={this.state.title}></Test>
      </div>
    );
  };
};

export default App;
